<template>
  <div>
    <button class="switch" role="switch" aria-label="切换暗色主题" aria-checked="false" data-v-36b198f3=""
            data-v-3de418c2="" @click="toggleDarkMode" id="change">
      <div class="switch__action">
        <div class="switch__icon"><!--[--><i class="el-icon" style="font-size:13px;" data-v-3de418c2=""><!--[-->
          <svg viewBox="0 0 24 24" class="dark-icon" data-v-3de418c2="">
            <path
                d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56z"
                fill="currentColor"></path>
          </svg>
          <svg viewBox="0 0 24 24" class="light-icon" data-v-3de418c2="">
            <path
                d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z"
                fill="currentColor"></path>
          </svg><!--]--></i><!--]--></div>
      </div>
    </button>
  </div>

</template>
<script>
import { ref, watch } from 'vue'

export default {
  setup() {
    const isDark = ref(false)

    // 监听全局的暗黑模式状态
    watch(
        () => isDark.value,
        (newValue) => {
          const html = document.querySelector('html')
          const button = document.querySelector("#change")
          if (newValue) {
            html.classList.add('dark')
            button.classList.add('black')
          } else {
            html.classList.remove('dark')
            button.classList.remove('black')
          }
        }
    )
    // 切换暗黑/亮色模式
    const toggleDarkMode = () => {
      isDark.value = !isDark.value
    }
    return {
      isDark,
      toggleDarkMode,
    }
  },
}
</script>
<style>
.switch__action, .switch__icon {
  width: 16px;
  height: 16px;
}
.switch__icon .el-icon {
  position: absolute;
  left: 1px;
  bottom: 1px;
}
.el-icon[data-v-3de418c2] {
  cursor: pointer;
}
.el-icon svg {
  height: 1em;
  width: 1em;
}
.light-icon[data-v-3de418c2] {
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
}
.dark .light-icon[data-v-3de418c2] {
  opacity: 0;
}
.dark .dark-icon[data-v-3de418c2] {
  opacity: 1;
}
.dark-icon[data-v-3de418c2] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.dark-icon[data-v-3de418c2], .light-icon[data-v-3de418c2] {
  transition: color var(--el-transition-duration),opacity var(--el-transition-duration);
}
.switch {
  margin: 0;
  display: inline-block;
  position: relative;
  width: 40px;
  height: 20px;
  border: 1px solid #dcdfe6;
  outline: none;
  border-radius: 10px;
  box-sizing: border-box;
  background: #f2f2f2;
  cursor: pointer;
  transition: border-color var(--el-transition-duration),background-color var(--el-transition-duration);
}
.switch__icon {
  position: relative;
}
.switch__action {
  position: absolute;
  top: 1px;
  left: 1px;
  border-radius: 50%;
  background-color: #ffffff;
  transform: translate(0);
  color: #606266;
  transition: border-color var(--el-transition-duration),background-color var(--el-transition-duration),transform var(--el-transition-duration);
}
.dark .switch__action {
  transform: translate(20px);
}
.black{
  border: 1px solid #4c4d4f;
  background: #2c2c2c;
}
</style>
